<template>
  <el-row class="auth_box">
    <el-col class="son_view" :span="7" :offset="15">
      <div class="tab_box">
        <router-link
          class="tab"
          :to="{ name: 'login' }"
          active-class="tab_active"
          >登录</router-link
        >
        <router-link
          class="tab"
          :to="{ name: 'register' }"
          active-class="tab_active"
          >注册</router-link
        >
      </div>
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import Login from "@/pages/auth/login/Login.vue";
import Register from "@/pages/auth/register/Register.vue";

export default {
  name: "Auth",
  components: {
    Login,
    Register,
  },
};
</script>

<style scoped>
.auth_box {
  height: 100%;
  background: url("@/assets/tower.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.son_view {
  height: 70%;
}

.tab_box {
  background-color: rgba(200, 200, 200, 0.6);
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid gray;
}

.tab {
  text-decoration: none;
  padding: 20px;
  font-weight: 1000;
  color: grey;
}

.tab_active {
  color: #2b78c7;
}
</style>